<template>
    <div class="markdown">
        <el-form ref="form" :model="aboutData" label-width="80px">
             <el-form-item label="公司名称">
                <el-input v-model="aboutData.name" size="small" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="公司地址">
                <el-input v-model="aboutData.address" size="small" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="公司电话">
                <el-input type="textarea" size="small" v-model="aboutData.phone"></el-input>
            </el-form-item>
            <el-form-item label="联系我们">
                <el-input type="textarea" size="small" v-model="aboutData.email"></el-input>
            </el-form-item>
            <el-form-item class="submit" style="text-align: center;">
                <mavon-editor v-model="content" ref="md"  @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/>
                <el-button type="primary"  @click="submitEdit">更新</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { strEncodeOrDecode, imageType } from '../utils/mUtils'
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

export default {
    components: {
        mavonEditor
    },
    data() {
         return {
            imgType:  '',
            imageUrl: '',
            content: '',
            aboutData: {
                name: "",
                address: "",
                phone: "",
                email: "",
                content: '',
            },
         }
    },

    methods: {
         // 将图片上传到服务器，返回地址替换到md中
        $imgAdd(pos, $file){
            var formdata = new FormData();
            formdata.append('file', $file);
            // 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口
            this.$axios({
                url: '/api/upload',
                method: 'post',
                data: formdata,
                headers: { 'Content-Type': 'multipart/form-data' },
            }).then((res) => {
                this.$refs.md.$img2Url(pos, process.env.VUE_APP_AJAX + res.data.filename);
            })
        },
        getDetail() {
            this.$axios('/api/about').then(res => {
                if (res.data.errno === 0)  {
                    this.aboutData = res.data.result
                    // 解码 decode
                    this.content = strEncodeOrDecode(res.data.result.content, 'decode')
                    this.$message({
                        type: "success",
                        message: "数据获取成功！"
                    })
                }
            })
        },

        beforeAvatarUpload(file) {
            const isIMG = imageType(file.type);
            const isLt2M = file.size / 1024 / 1024 < 2;

            this.imgType = isIMG
            if (!isIMG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isIMG && isLt2M;
        },

        change(content, render) {
            this.content = content
        },

        submitEdit() {
            // 编码 encode
            this.aboutData.content = strEncodeOrDecode(this.content, 'encode')
            this.$axios.post('/api/about/update', this.aboutData).then(res => {
                if (res.data.errno === 0) {
                     this.$message({
                        message: res.data.msg,
                        type: "success"
                    })
                    return
                }
                this.$message(res.data.msg)
            })
        },

    },

     mounted() {
         this.getDetail()
     }
    
}
</script> 


<style lang="less" scoped>
.markdown {
    margin: 20px 50px;
}
.my-editor {
    height: 5rem;
    border: 1px solid #999;
}
.submit {
    .el-button {
        text-align: center;
        margin-top: 20px;
    }
}
</style>